import { createRouter, createWebHashHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'
import NProgress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })

// 导入页面
// 下面这种写法是立即加载（静态导入）
/** 
import Login from '../views/Login/index.vue'
import Layout from '../views/Layout/index.vue'
import Home from '../views/Home/index.vue'
import Category from '../views/Category/index.vue'
import Cart from '../views/Cart/index.vue'
import My from '../views/My/index.vue'
import GoodsDetail from '@/views/GoodsDetail/index.vue'
import NotFound from '../views/NotFound/index.vue'
*/

// 下面这些写法是路由懒加载 （动态导入）
const Login = () => import('../views/Login/index.vue')
const Layout = () => import('../views/Layout/index.vue')
const Home = () => import('../views/Home/index.vue')
const Category = () => import('../views/Category/index.vue')
const Cart = () => import('../views/Cart/index.vue')
const My = () => import('../views/My/index.vue')
const GoodsDetail = () => import('@/views/GoodsDetail/index.vue')
const NotFound = () => import('../views/NotFound/index.vue')

const router = createRouter({
  history: createWebHashHistory(), // 路由模式，必须配置
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/home', // 从一级路由 `/` 重定向 到 二级路由 `/home`
      children: [
        // 嵌套路由前面不要加/
        {
          path: 'home',
          component: Home,
          meta: {
            // meta：元信息（额外的信息）
            title: '首页'
          }
        },
        {
          path: 'category',
          component: Category,
          meta: {
            title: '分类'
          }
        },
        {
          path: 'cart',
          component: Cart,
          meta: {
            title: '购物车'
          }
        },
        {
          path: 'my',
          component: My,
          meta: {
            title: '我的',
            isNeedLogin: true
          }
        }
      ]
    },
    {
      path: '/login',
      component: Login,
      meta: {
        title: '登录'
      }
    },
    {
      path: '/detail',
      component: GoodsDetail,
      meta: {
        title: '商品详情'
      }
    },
    {
      path: '/:pathMatch(.*)*',
      component: NotFound
    }
  ]
})

// 全局前置守卫
/**
 * 什么时候执行该函数
 * 我们路由进入到某个页面 `之前`
 */
const needLoginRoutes = ['/my', '/order']
router.beforeEach((to, from) => {
  // console.log('---to---', to)

  NProgress.start()

  // if (needLoginRoutes.includes(to.path)) {
  if (to.meta.isNeedLogin) {
    const store = useUserStore()

    if (store.token) {
      // 有token，认为就登录了
      return true
    } else {
      // 没有token
      return 'login'
    }
  }

  // 代表无需权限
  return true
})

// 全局后置守卫
/**
 * 什么时候执行该函数
 * 我们路由进入到某个页面 `之后`
 */
router.afterEach((to, from) => {
  // console.log('---to---', to)

  NProgress.done()

  document.title = `扣丁课堂-${to.meta.title}`

  // 下面的写法就是一种硬编码
  /** 
  if (to.path === '/home') {
    document.title = '首页'
  } else if (to.path === '/category') {
    document.title = '分类'
  } else {
    document.title = '其它'
  }
  */
})

export default router
